<template>
  <div class="subMenu">
    <div v-for="(router, index) in sideMenu"
         :key="index">
      <el-submenu v-if="router.children && router.children.length > 0"
                  :index="router.meta.fullPath">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ router.meta.name }}</span>
        </template>

        <el-menu-item-group>
          <sub-Menu :sideMenu="router.children"></sub-Menu>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item v-else
                    :index="router.meta.fullPath">
        <i class="el-icon-location"></i>
        {{ router.meta.name }}
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "sub-Menu",
  props: {
    //接收的参数
    sideMenu: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data () {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
/* 更改submenu的样式 */

.el-menu--collapse .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

.el-menu--collapse .el-menu-item .el-submenu__icon-arrow,
.el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-menu-item-group .el-menu-item {
  padding: 0 0 0 30px;
}

.el-menu-item-group .el-menu-item-group__title {
  padding: 0;
}

.search .el-input__inner {
  width: 300px;
  margin-right: 5px;
}
</style>